<template>
  <div class="main">
    <h3>树形下拉框</h3>
    <!-- 搜索框 -->
    <el-form>
      <el-form-item label="请选择" prop="name">
        <el-input
          placeholder="请选择区域"
          v-model="name"
          :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"
          @click.native="deptogglePanel($event)"
          size="medium"
        ></el-input>
        <!-- 下拉框 -->
        <div v-if="showTree" class="treeDiv" ref="selectTree">
          <el-tree
            class="tree"
            :data="datas"
            :props="defaultProps"
            accordion
            node-key="id"
            :expand-on-click-node="false"
            @node-click="handleRegionNodeClick"
          ></el-tree>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  name: 'treeSelect',
  data () {
    return {
      showTree: false,
      defaultProps: {
        children: 'children',
        label: 'event'
      },
      name: '1111',
      datas: [{
        id: 1,
        event: '事件1',
        label: 100,
        comment: '无',
        children: [
          {
            id: 2,
            event: '事件2',
            label: 10,
            comment: '无'
          },
          {
            id: 3,
            event: '事件3',
            label: 90,
            comment: '无',
            children: [
              {
                id: 4,
                event: '事件4',
                label: 5,
                comment: '无'
              },
              {
                id: 5,
                event: '事件5',
                label: 10,
                comment: '无'
              },
              {
                id: 6,
                event: '事件6',
                label: 75,
                comment: '无'
              }
            ]
          }
        ]
      }]
    }
  },
  methods: {
    /* 点击输入框,阻止事件冒泡事件 */
    deptogglePanel (event) {
      this.showTree = true
      // console.log(this.showTree)
      // event || (event = window.event)
      // event.stopPropagation
      //   ? event.stopPropagation()
      //   : (event.cancelBubble = true)
      // this.showTree ? this.dephide() : this.depshow()
    },
    depshow () {
      this.showTree = true
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephide () {
      this.showTree = false
      document.addEventListener('click', this.dephidePanel, false)
    },
    dephidePanel (e) {
      if (
        this.$refs.selectTree &&
        !this.$refs.selectTree.contains(e.target)
      ) {
        this.dephide()
      }
    },
    handleRegionNodeClick (data) {
      // console.log(event)
      this.name = data.event
      this.showTree = false
    }
  }
}
</script>

<style scoped>
.main {
  width: 800px;
  height: 800px;
  border: 1px dashed #ccc;
  margin: 20px auto;
  padding: 20px;
}
.treeDiv {
  width: 100%;
  z-index: 100;
  background-color: #ffff;
}
.tree {
  max-height: 500px;
  /* overflow: auto; */
  box-shadow: 1px 2px 5px 0px rgba(78, 78, 78, 0.2);
  border-radius: 2px;
  border: solid 1px #d2ded2;
}
</style>
